<template>
	<view class="content" v-if="$db.get('config')">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="dream约文" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<scroll-view class="huabox" scroll-y="true">
			<view class="toptxt">
				— 请选择想要寻找的写手类型 —
			</view>
			<view class="xunbox">
				<view class="option" v-for="(tag, index) in options" :key="index"
					:class="{ 'selected': !writer_tags?false:writer_tags.some(item => item.id == tag.id ) }"
					@click="toggleTag(tag,'writer_tags')">
					{{ tag.name }}
				</view>
			</view>
			<view class="toptxt">
				— 选择喜欢的内容，会推的更准确哦 —
			</view>
			<view class="xunbox">
				<view class="option oneline" v-for="(tag, index) in neiList" :key="index"
					:class="{ 'selected': !content_tags?false:content_tags.some(item => item.id == tag.id) }"
					@click="toggleTag(tag,'content_tags')">
					{{ tag.name }}
				</view>
			</view>
		</scroll-view>
		<view class="dibu" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
			<view class="dili" @click="goToindex">
				跳过选择
			</view>
			<view class="chose" v-if="!writer_tags.length && !content_tags.length">
				选择想看的标签
			</view>
			<view class="lvact" v-else @click="goToTags">
				选择完成
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				paddingBottomHeight: 0, //苹果X以上手机底部适配高度
				options: [],
				neiList: [],
				type:0,
				
				writer_tags: this.$db.get('userInfo').like_writer_tags ? this.$db.get('userInfo').like_writer_tags : [],
				content_tags: this.$db.get('userInfo').like_content_tags ? this.$db.get('userInfo').like_content_tags : []
			}
		},
		created() {
			this.getUserInfoTag();
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
			var url = getCurrentPages()
			this.urlPath = '/' + url[0].route
			

		},
		onLoad(ops) {
			this.type = ops.type;
		},
		methods: {
			getUserInfoTag() {
				
				this.getConfig()
				// this.$api.default.request('user/getUserInfoTag').then((res) => {
				// 	if (res.code) {
				// 		this.writer_tags = res.data.like_writer_tags
				// 		this.content_tags = res.data.like_content_tags
					
				// 	} else {
				// 		this.$common.errorToShow(res.msg)
				// 	}
				// })
			},
			goToTags() {
				
				
				var prams = {}
				prams['like_writer_tags'] = this.writer_tags
				prams['like_content_tags'] = this.content_tags
				let _this = this;	
				this.$api.default.request('user/saveUser', prams).then((res) => {
					if (res.code == 1) {
						_this.$db.set('userInfo', res.user)
							_this.$common.errorToShow('操作成功')
							console.log(_this.type,777777);
						if(_this.type == 1){
							
						}else{
					
							setTimeout(function(){
								 _this.goToindex()
							},500)
							
						}
						
					
					
					}
				})
			},
			
			async getConfig() {
				await this.$api.default.request('Common/getConfig').then((res) => {
					if (res.code == 1) {
						this.$db.set('config', res.data)
						this.options = res.data.tags.Xslx
						this.neiList = res.data.tags.Nrbq
					}
				})
			},
			toggleTag(item, key) {
					
				
				const index = this[key].findIndex(val => val.id == item.id)
				if (index !== -1) {
					this[key].splice(index, 1);
				} else {
					this[key].push(item);
				}
			},
			// 去首页
			goToindex() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 50rpx 0 !important;
		height: 100vh;
		overflow: hidden;

		.huabox {
			height: calc(100vh - 170rpx);

			.toptxt {
				padding: 20rpx 0;
				font-size: 28rpx;
				font-weight: normal;
				text-align: center;
				color: #3D3D3D;
			}

			.xunbox {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
			}

			.option:nth-child(3n) {
				margin-right: 0;
			}

			.option {
				width: 202rpx;
				height: 80rpx;
				border-radius: 25px;
				text-align: center;
				margin-right: 22rpx;
				margin-bottom: 20rpx;
				background: rgba(153, 153, 153, 0.1);
				line-height: 80rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #3D3D3D;
			}

			.selected {
				background: rgba(69, 196, 176, 0.1);
				color: #45C4B0;
			}
		}

		.dibu {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 40rpx 0;

			.dili {
				width: 336rpx;
				height: 80rpx;
				border-radius: 45px;
				margin: 0 9rpx;
				opacity: 1;
				background: rgba(153, 153, 153, 0.1);
				line-height: 80rpx;
				font-size: 28rpx;
				font-weight: bold;
				text-align: center;
				color: #999999;
			}

			.chose {
				width: 336rpx;
				height: 90rpx;
				border-radius: 45px;
				margin: 0 9rpx;
				opacity: 1;
				background: #999999;
				line-height: 90rpx;
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				color: #ffffff;
			}

			.lvact {
				width: 336rpx;
				height: 90rpx;
				border-radius: 45px;
				margin: 0 9rpx;
				opacity: 1;
				background: #45C4B0;
				line-height: 90rpx;
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				color: #ffffff;
			}
		}
	}
</style>